<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书籍管理</title>
	<script type="text/javascript" src="../../static/easyui/jquery.min.js" charset="utf-8"></script>
	<link id="easyuiTheme" rel="stylesheet" href="../../static/easyui/themes/ui-cupertino/easyui.css">
	<link rel="stylesheet" href="../../static/easyui/themes/icon.css">
	<link rel="stylesheet" href="../../static/font/css/font-awesome.min.css">
	<script type="text/javascript" src="../../static/easyui/jquery.easyui.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../static/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../static/js/easyui_datagrid_yzy.js" charset="utf-8"></script>

<script type="text/javascript">
	$(function(){
		$('#file').filebox({    
		    buttonText: '选择图片文件',
		    multiple:false,
		    missingMessage:'必须上传图片文件！',
		    message : '用户名因该为2-5个字符之间',
		    required:true,
		})
		$('#number').numberspinner({
			min:1,
			max:999999,
			required:true,
			value:0,
			editable: false,
			missingMessage:'图书数量必选！'
		});
		
		var h = document.documentElement.clientHeight || document.body.clientHeight;
		$('#t_table').datagrid({
			url:'pagelist',
			idField:'id',
			pagination:true,	//分页
			pageSize:20,
			pageList:[5,10,20],
			height:h-29,
			fitColumns:true,	//宽度是否自适应
			striped:true,	//隔行变色 斑马色
			loadMsg:'数据正在疯狂的加载中...',//加载数据时显示的内容
			rownumbers:true,	//显示序号
			singleSelect:true,	//单选模式
			scrollbarSize:0,	//滚动条宽度
			columns:[ [
				{
					field:'name',
					title:'名称',
					width:20,
					sortable:true,
					align:"center"
				},{
					field:'author',
					title:'作者',
					width:10,
					sortable:true,
					align:"center"
				},{
					field:'press',
					title:'出版社',
					width:20,
					sortable:true,
					align:"center"
				},{
					field:'number',
					title:'数量',
					sortable:true,
					width:10,align:"center"
					
				},{
					field:'isbn',
					title:'isbn',
					width:20,
					sortable:true,
					align:"center"
				},{
					field:'filename',
					title:'图片',
					width:20,
					sortable:true,
					formatter:function(value,record,index){//鼠标悬停显示数据
						/* console.info("value鼠标位置"+value);
						console.info(record);
						console.info("id数据字段："+record.id);
						console.info("index"+index); */
						return '<div href="javascript:void(0)" onmouseover="show(this,&apos;download?id='+record.id+'&apos;)"  onMouseOut="hide(div1)" >'+value+' </div > '
					},
					
				},{
					field:'loan',
					title:'可借出的图书数',
					width:10,
					align:"center",
					sortable:true,
					formatter:function(value,record,index){//鼠标悬停显示数据
						if(value<1){
							return '<span style="color: #cc0000;background: #f2f5f7;">剩余0本图书！</span>';
						}else{
							return '<span style="color: #35590d;background: #f2f5f7;">剩余'+value+'本图书！</span>';
						}
					},
				}
			] ],
			toolbar:[
				{
					text:'增加图书',
					iconCls:'icon-add',
					handler:function(){
						
						$('#mydialog').dialog({
							title:'新增用户'
						});
						//$('#mydialog').find('input').val('');
						//$('#myform').get(0).reset();
						$('#myform').form('clear');
						$('#mydialog').dialog('open');
					}
				},{
					text:'修改图书信息',
					iconCls:'icon-edit',
					handler:function(){
						var arr= $('#t_table').datagrid('getSelections');
						if(arr.length !=1 ){
							$.messager.show({
								title:'提示',
								msg:'只能选择一行进行修改'
							});
						}else{
							$('#mydialog').dialog({
								title:'用户修改'
							});
							//1.打开窗口
							$('#mydialog').dialog('open');
							//2.清空表单数据
							$('#myform').get(0).reset();
							$('#myform').form('clear');
							//把选中的元素放到表单
							$('#myform').form('load',{
								id:arr[0].id,
								isbn:arr[0].isbn,
								name:arr[0].name,
								press:arr[0].press,
								author:arr[0].author,
								number:arr[0].number,
								file:arr[0].filename,
							});
						}
					}
				},{
					text:'删除图书',
					iconCls:'icon-Empty',
					handler:function(){
						var arr= $('#t_table').datagrid('getSelections');
						if(arr.length<=0){
							$.messager.show({
								title:'提示',
								msg:'请选择删除的用户'
							});
						}else{
							//获取所有删除用户的姓名 并保存下来 然后给用户提示
							var dele="";
							for(var i=0 ;i<arr.length;i++){
								dele +='('+ arr[i].name+')&emsp;';
							}
							dele = dele.substring(0 , dele.length-6)
							$.messager.confirm('确定删除?','是否要删除 '+dele+'？',function(r){
								if(r){//确定了
									var ids="";
									for(var i=0 ;i<arr.length;i++){
										ids += arr[i].id+',';
									}
									ids = ids.substring(0 , ids.length-1);
									$.post('delete',{id:ids},function(result){
										//1.刷新数据表格
										$('#t_table').datagrid('reload');
										//2.清空idField
										$('#t_table').datagrid('unselectAll');
										//2.给提示信息
										$.messager.show({
											title:'提示',
											msg:'删除成功！'
										});
									});
								}else{
									return ;
								}
							});
							
						}
					}
				},{
					text:'刷新',
					iconCls:'icon-page_white_refresh',
					handler:function(){
						 self.location.reload();
					}
				}
			]
		});
		//点击按钮提交表单
		$('#but').click(function(){
			$("#myform").submit();
		});
		//进行查询
		$('#gobtn').click(function(){
			$('#t_table').datagrid('load', serializeForm($('#mysearch').form()));
		});
		//关闭
		$('#but1').click(function(){
			$('#mydialog').dialog('close');
		});
		$('#removebtn').click(function(){
			//清空form表单
			$('#mysearch').form('clear');
			$("#t_table").datagrid('load', {});
		});
		//提交表单前进行校验
		$('#myform').form({
			url:"save" ,
			onSubmit: function(){    
		        if(!$('#myform').form('validate'))  {
		        	$.messager.alert('警告','输入的数据不合规范，不能保存','info');
		        	return false;
		        }
		    },  
		    success:function(result){
		    	if(result=="isbn"){
		    		$.messager.alert('ISBN重复','解决方法：<br>更换ISBN，或者在相同的ISBN的书籍里增加数量！','info');
		    	}else if(result=="no"){
		    		$.messager.alert('0x0000000A错误','错误原因：<br>上传的图片文件的格式出现问题！','error');
		    	}else{
		    		//1.关闭窗口
					$('#mydialog').dialog('close');
					//2.提示信息
					$.messager.show({
						title:"OK",
						msg:'操作成功'
					});
					//3.刷新页面
					$('#t_table').datagrid('reload');
		    	}
			},
			error:function(){
				$.messager.alert('警告','操作失败');
			}
		});
		
	});
	//序列化表单
	function serializeForm(form){
		var obj = {};
		$.each(form.serializeArray(), function(index){
			if(obj[this['name']]){
				obj[this['name']] = obj[this['name']] + ',' + this['value'];
			}else{
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	}
</script>
<style type="text/css">
	body{
		margin: 0px;
		
	}
	th{
		width: 80px;
	}
	td input{
		width: 150px;
	}
</style>
</head>
<body>
	<div id="mydiv"></div>
	<div id="lay" style="width: 100%;height: 100%;">
		<div region='north' class="easyui-layout" style="height: 28px;background: #f4f4f4;margin-left: 15px;">
			<form action="" id="mysearch" method="post">
				<span style="line-height: 27px;color: #666666">
				&emsp;图书名称:<input name="name" type="text" value="" class="easyui-textbox" id="yhm">
				&emsp;作者：<input name="author" value="" class="easyui-textbox" width="100%" >
				&emsp;isbn:<input name="isbn" value="" class="easyui-textbox" width="100%" >
				&emsp;出版社<input name="press" value="" class="easyui-textbox" width="100%" >
				</span>
				<a class="easyui-linkbutton" iconCls='icon-zoom' id="gobtn">开始检索</a>
				<a class="easyui-linkbutton" iconCls='icon-undo' id="removebtn">清空条件</a>
			</form>
		</div>
		<div region='center'>
			<table id="t_table"></table>
		</div>
	</div>
	
	<div id="div1" style="display:none; background-color:#eee; position:absolute; width:76px; height:100px; top:-50px;" >
        <img id=imgname src="" border="0" style="width: 100px;height: 140px;"/>
    </div >
    
    <div id="mydialog" modal="true" title="新增图书" class="easyui-dialog" style="	"
		closed="true">
		<form class="custom-form" method="post" id="myform" enctype="multipart/form-data">
			<input type="hidden" name="id" value="">
			<table>
				<tr>
					<th>图书图片</th>
					<td><input data-options="prompt:'浏览' ,accept:'image/gif,image/jpeg,image/jpg,image/png,image/svg,application/octet-stream'"    class="easyui-filebox" name="file" id="file" ></td>
				</tr>
				<tr>
					<th>图书数量:</th>
					<td><input  type="text" name="number" id="number" data-options="prompt:'请选择'" style="width: 80px;"></td>
				</tr>
				<tr>
					<th>图书名称：</th>
					<td><input class="easyui-textbox"  required="true"  type="text" name="name"   data-options="prompt:'图书名称' "></td>
				</tr>
				<tr>
					<th>isbn</th>
					<td><input class="easyui-textbox" type="text" name="isbn" required="true"  data-options="prompt:'ISBN' "></td>
				</tr>
				<tr>
					<th>出版社:</th>
					<td><input class="easyui-textbox" type="text" name="press" required="true"  data-options="prompt:'出版社' "></td>
				</tr>
				<tr>
					<th>作者:</th>
					<td><input class="easyui-textbox" type="text" name="author" required="true"  data-options="prompt:'作者' "></td>
				</tr>
				<tr>
					<td colspan="2"  >
					<a id="but" iconCls='icon-table_save' style="margin-left: 40%;margin-top: 10px;" class="easyui-linkbutton">提交</a>
					<a id="but1" iconCls='icon-cross' class="easyui-linkbutton" style="margin-top:10px;">关闭</a>
					</td>
					
				</tr>
			</table>
		</form>
	</div>
	
</body>
<script type="text/javascript">
/***
 * 显示图片
 */
function show(obj,imgobj)  
{	
    var str=getIE(obj)  
    var temp=str.split(",")  
    var $top=temp[0];
    var $left=temp[1]; 
    var objDiv=document.getElementById("div1")  
    $('#div1').show();
   	$('#div1').css('top',$top+'px')
    $('#div1').css('left',$left+'px')
    $('#div1').css('width','100px')
    $('#div1').css('height','140px')
    imgname.src=imgobj;
}
function getIE(e)
{ 
    var t=e.offsetTop;  
    var l=e.offsetLeft;  
    var h = document.documentElement.clientHeight || document.body.clientHeight;
    while(e=e.offsetParent)
    {  
        t+=e.offsetTop+5;  
        l+=e.offsetLeft;  
    }  
    
    if(t>h){
    	t=50;
    }else{
	    h=h-135;
	    if(t>h){
	    	t=t-173;
	    }
    }
    return (t+","+l);  
}  
function hide(obj)
{
    $('#div1').hide();
}
</script>
</html>